<template>
  <div>
    <div 
      v-if="pointer" 
      class="iconfont pointer"
      :style="{
        top: pointerOffset + 'rpx',
        left: '50%',
        color: pointerColor,
        fontSize: pointerSize
      }"
      >&#xe605;</div>
    <div 
      class="component"
      :style="{
        transform: 'rotate(' + (90 - selected * angle) + 'deg)',
        width: outerDiameter + 'rpx',
        height: outerDiameter + 'rpx'
        }"
      >
      <div class="items flex-row">
        <div 
          class="item flex-column " 
          v-for="(item, index) in icons"
          :key="index"
          @click="changeSelected(index)"
          :style="{
            top: offsets[index].offsetY + 'rpx',
            left: offsets[index].offsetX + 'rpx',
            transform: 'rotate(' + (-(90 - angle * index)) + 'deg)' + 'translate(-50%, -50%)'
            }"
          >
          <van-icon
            v-if="!isStar"
            :name="item.icon" 
            :size="iconSize"
            :color="index === selected ? '#000000' : '#999999' "
            transition=".5s"
            />
          <van-icon v-else
            :name="index > selected ? item.icon : item.selectIcon"
            :size="iconSize"
            :color="index > selected ? '#999999' : 'red' "
            transition=".5s"
          />

          <div 
            v-if="!isStar"
            class="name"
            :class="{
              'not-selected': index !== selected 
              }"
            >
            {{item.text}}
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {
  mapMutations,
} from 'vuex'
export default {
  props: {
    outerDiameter: {
      type: Number,
      required: true
    },
    innerDiameter: {
      type: Number,
      required: true
    },
    icons: {
      type: [Array, String],
      required: true
    },
    iconSize: {
      type: String,
      require: true
    },
    defaultSelected: {
      type: Number,
      default: 0
    },
    pointer: {
      type: Boolean,
      default: true
    },
    pointerColor: {
      type: String,
      default: "orange"
    },
    pointerSize: {
      type: String,
      default: '40rpx'
    },
    isStar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: this.defaultSelected,
      pointerOffset: (this.outerDiameter - this.innerDiameter) / 2,
      angle: 0,
    }
  },
  methods: {
    ...mapMutations(['changeIndexPageSelected', 'changeIndexStarSelected']),
    calcOffsets(outerDiameter, innerDaimeter) {
      const diameter = (outerDiameter + innerDaimeter) / 2
      const radius = diameter / 2
      const count = 9
      const deg = Math.PI / 180
      const angle = (1 / count) * 180
      this.angle = angle
      const baseOffset = (outerDiameter - innerDaimeter) / 2
      const offsets = new Array(13)
        .fill(0)
        .map((item, index) => {
          const offsetX = (outerDiameter / 2) + Math.cos((180 - (index * angle)) * deg) * radius
          const offsetY = (outerDiameter / 2) - Math.sin((180 - (index * angle)) * deg) * radius
          return {
            offsetX,
            offsetY
          }
        })
      return offsets
    },
    changeSelected(index) {
      this.selected = index
      if (this.isStar) {
        this.changeIndexStarSelected(index)
      } else {
        this.changeIndexPageSelected(index)
      }
    },
  },
  computed: {
    offsets() {
      return this.calcOffsets(this.outerDiameter, this.innerDiameter)
    }
  },
}
</script>

<style lang="less" scoped>
@border-color: #ccc;
.pointer {
  position: absolute;
  transform: translate(-50%, -50%);
}
.component {
  position: relative;
  transition: .5s all ease-in-out;
  border-radius: 50%;
  .items {
    pointer-events: auto;
    .item {
      position: absolute;
      transform-origin: top left;
      justify-content: space-around;
      .name {
        font-size: 28rpx;
        transition: .35s;
        text-overflow:ellipsis; 
        word-break: none;
        overflow:hidden;
      }
      .not-selected {
        color: #ffffff;
      }
    }
  }
}
</style>